<template>
  <div class="index_box">
    <div
      class="menu"
      @click="menuClick"
      :class="[isOpen ? 'menu_open' : 'menu_close']"
    >
      <span />
      <span />
      <span />
    </div>
    <div
      class="navigation"
      :class="[isOpen ? 'navigation_open' : 'navigation_close']"
    >
      <ul class="point">
        <li>
          <router-link to="/home">首页</router-link>
        </li>
        <li>
          <router-link to="/post">文章</router-link>
        </li>
        <li>
          <router-link to="/post">留言</router-link>
        </li>
      </ul>
    </div>
    <div class="section_1">
      <main class="main">
        <div>
          <p>欢迎光临👏</p>
          <p>我是一名前端小学生，写vue的！！！</p>
          <p>
            <span id="typed" />
          </p>
        </div>
      </main>
      <div
        class="ent_btn"
        @click="entHome"
        data-aos="zoom-in-down"
      >进入博客</div>
    </div>
    <div class="section_2">
      <div class="main">
        <div
          class="title"
          data-aos="zoom-in-down"
        >热门文章</div>
        <div class="list_box">
          <div
            v-for="(item, index) in postList"
            :key="index"
            data-aos="zoom-in-down"
            data-aos-anchor-placement="top-bottom"
            class="list"
          >
            <p class="list_p1">
              <img :src="item.imgUrl">
            </p>
            <p class="list_p2">{{ item.title }}</p>
            <p class="list_p3">{{ item.time }}</p>
            <p
              class="list_p4"
              v-html="item.content"
            />
            <p
              class="list_p5"
              @click="goDetail(item.id)"
            >阅读更多</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, onUnmounted, onMounted } from 'vue'
import Typed from 'typed.js'
import { useRouter } from 'vue-router'
import { getPost, PostData } from '@/api/post'
export default defineComponent({
  setup() {
    const router = useRouter()
    const isOpen = ref(false)
    const postList = ref<PostData[]>([])
    const menuClick = () => {
      isOpen.value = !isOpen.value
    }
    const typed = ref()
    const options = {
      strings: ['喜欢打游戏!!!', '看电影!!!', '喜欢明星赵丽颖!!!'],
      typeSpeed: 50, // 打印速度
      startDelay: 300, // 开始之前的延迟300毫秒
      loop: true // 是否循环
    }
    const fun = async () => {
      await nextTick()
      typed.value = new Typed('#typed', options)
    }
    fun()
    const entHome = () => {
      router.push({ path: '/post' })
    }
    const getList = function () {
      getPost({
        categoryId: '',
        pageNum: 1,
        pageSize: 10,
        tagIds: [],
        title: ''
      }).then(res => {
        postList.value = res.data.posts
      })
    }
    const goDetail = (id) => {
      router.push({
        path: 'detail',
        query: { id }
      })
    }
    onMounted(() => {
      getList()
    })
    onUnmounted(() => {
      typed.value.destroy()
    })
    return {
      isOpen,
      menuClick,
      entHome,
      postList,
      goDetail
    }
  }
})
</script>
<style lang="scss" scoped>
.index_box {
  height: 100%;
  .menu {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    right: 55px;
    top: 40px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 102;
    &:hover {
      background-color: #6bc30d;
    }
    span {
      display: block;
      background: #fff;
      width: 26px;
      height: 2px;
      line-height: 10px;
      margin: 0 auto;
      margin-top: 5px;
      &:first-child {
        margin-top: 12px;
      }
    }
    &.menu_open {
      span {
        &:first-child {
          transform: rotate(45deg);
          transition: all 0.5s;
          margin-top: 18px;
        }
        &:nth-child(2) {
          transform: rotate(-45deg);
          transition: all 0.5s;
          margin-top: -2px;
        }
        &:last-child {
          display: none;
        }
      }
    }
  }
  .navigation {
    width: 100%;
    height: 100%;
    position: absolute;
    .point {
      position: absolute;
      right: 0;
      top: 200px;
      z-index: 101;
      font-size: 20px;
      li {
        display: block;
        text-align: left;
        line-height: 80px;
        a {
          color: #686967;
          display: inline-block;
          line-height: 46px;
          padding: 10px 50px;
          font-size: 20px;
          color: #686967;
          transition: color 0.6s linear;
          position: relative;
          &::before {
            transition: all 0.3s linear;
            content: "";
            height: 1px;
            background-color: transparent;
            position: absolute;
            top: 50%;
            left: 15px;
            right: 105px;
          }
          &:hover {
            color: #6bc30d;
            &::before {
              background-color: #6bc30d;
              right: 15px;
            }
          }
        }
      }
    }
    &.navigation_open {
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      z-index: 101;
      &::before {
        right: 0;
      }
    }
    &.navigation_close {
      .point {
        display: none;
      }
      &::before {
        right: -60%;
      }
    }
    &::before {
      content: "";
      width: 60%;
      height: 100%;
      background: #fff;
      position: fixed;
      transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      transform: translateZ(0) translateX(45%) skew(-12deg);
      backface-visibility: hidden;
      top: 0;
      z-index: 11;
      background-color: #fff;
      background-image: linear-gradient(46deg, #fff, #f1f2f0);
    }
  }

  .section_1 {
    height: 100vh;
    background: transparent;
    padding: 0;
    background-image: url("../../assets/images/banner_1.jpeg");
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
    position: relative;
    .main {
      height: 400px;
      width: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .ent_btn {
      position: absolute;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      bottom: 40px;
      left: 50%;
      margin-left: -50px;
      cursor: pointer;
      background: #6bc30d;
      font-size: 14px;
      border-radius: 4px;
      z-index: 100;
    }
  }
  .section_2 {
    height: 100vh;
    background: transparent;
    padding: 0;
    background-image: url("../../assets/images/banner_2.jpeg");
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    color: #fff;
    .main {
      width: 100%;
      padding: 10%;
      box-sizing: border-box;
      .title {
        margin-top: 60px;
        text-align: center;
        margin-bottom: 60px;
        font-size: 35px;
        &::after {
          content: "";
          height: 1px;
          background: #6bc30d;
          display: block;
          width: 78px;
          margin-top: 20px;
          position: relative;
          left: 50%;
          margin-left: -39px;
        }
      }
      .list_box {
        display: flex;
        justify-content: center;
        .list {
          height: 400px;
          background: #fff;
          flex: 1;
          color: #333;
          margin-right: 40px;
          padding: 10px;
          .list_p1 {
            img {
              width: 100%;
              height: 224px;
              // object-fit: cover;
              object-fit: scale-down;
            }
          }
          .list_p2 {
            font-size: 16px;
            color: #333;
            font-weight: 500;
            margin: 10px 0;
          }
          .list_p4 {
            color: #999;
            height: 38px;
            line-height: 1.5;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .list_p5 {
            color: #29b6f6;
            margin-top: 15px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
